<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像 -->
            <!-- <div class="avatar_box">
                <img
                    src="../assets/logo.png"
                    alt
                />
            </div> -->
            <!-- 标题 -->
            <h4 class="login-message">电商后台管理系统</h4>
            <div class="darkbannerwrap"></div>
            <div class="title">用户登录</div>
            <!-- 登录表单 -->
            <el-form
                :model="loginForm"
                :rules="loginFormRules"
                ref="loginFormRef"
                class="login_form"
            >
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                    >

                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                        show-password
                    ></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button
                        style="background: #13e2a3;color: #fff;"
                        icon="el-icon-unlock"
                        @click="login"
                    >登录</el-button>
                    <el-button
                        type="info"
                        icon="el-icon-refresh-left"
                        @click="resetLoginForm"
                    >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 表单的数据绑定对象
            loginForm: {
                username: "admin",
                password: "123456"
            },
            // 表单的校验规则
            loginFormRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 登录
        login() {
            /**
             * async 和 await
             * 1.两者都是ES7提出的，是基于promise实现的
             * 2.通过同步方式的写法，实现异步操作，使代码更易读
             * 
             * async
             * 1.async修饰的函数会变成异步函数，返回一个promise对象
             * 2.当函数执行时，一旦遇到await函数就会先返回一个promise对象，等到异步操作完成，再去执行后面的语句
             * 
             * await
             * 1.await只能放在async函数里面
             * 2.await后面接一个会返回promise对象的函数并执行它
             */
            // 判断表单校验是否成功
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) {
                    return;
                }

                // 发送请求判断是否登录成功
                const { data: res } = await this.$http.post('login', this.loginForm) //直接返回执行的结果
                if (res.meta.status !== 200) {
                    return this.$message.error('登录失败');
                }
                this.$message.success('登录成功');
                sessionStorage.setItem('token', res.data.token); //将token保存到sessionStorage
                this.$router.push('/home');
            })
        },
        // 重置
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        }
    }
}
</script>
<style lang="less" scoped>
.login_container {
    background-image: linear-gradient(90deg, #84fab0, #8fd3f4);
    height: 100%;
}
.login_box {
    width: 430px;
    height: 400px;
    background: #fff;
    border-radius: 3px;
    // 水平垂直居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); //偏移
    // 头像
    .avatar_box {
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #eee;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #eee;
        }
    }
    .login-message {
        width: 80%;
        margin: 10px 0 0 -18px;
        padding: 15px 10px 15px 60px;
        background: #13e2a3;
        position: relative;
        top: 20px;
        color: #fff;
        font-size: 16px;
        }
    .darkbannerwrap {
        background: url('../assets/img/aiwrap.png');
        width: 18px;
        height: 10px;
        margin: 0 0 20px -18px;
        position: relative;
        top: 20px;
    }
    .title {
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translate(-50%);
        font-size: 20px;
        font-weight: bold;
    }
    .login_form {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80%;
        padding: 0 20px;
        box-sizing: border-box;
        .btns {
            text-align: center;
        }
    }
}
</style>